Build low-fidelity prototypes in Figma 在 Figma 中構建低保真原型

線框圖和原型有什麼不同？

• 線框圖：顯示每個頁面的樣子和佈局，比如首頁、個人資料頁等。可以畫在紙上，也可以用軟體做。

• 原型：展示使用者怎麼使用應用。重點是互動，也就是使用者點選後會發生什麼。

怎麼做低保真原型？

準備線框圖

用狗狗遛彎App舉例，需要這些頁面：

• 頁面1：首頁

• 頁面2：預約頁面（選日期和時間）

• 頁面3：遛狗員列表頁面（可以上下滑動）

• 頁面4：遛狗員詳細資訊頁

• 頁面5：預約成功頁

給每個頁面取名字

在Figma裡點選每個頁面，在左邊的"圖層"面板裡改名字，用數字編號，這樣連線的時候更方便。

切換到原型模式

點選Figma上方的"Prototype"按鈕。選中按鈕等元素時，會出現一個"+"號，就可以新增連線了。

新增頁面連線

連線示例：

• 首頁的"預約"按鈕 → 跳到預約頁面

• 預約頁面的"提交"按鈕 → 跳到遛狗員列表頁

• 列表頁的"瞭解更多"按鈕 → 跳到遛狗員詳情頁

• 詳情頁的"預約"按鈕 → 跳到確認頁

• 確認頁的返回按鈕 ← 回到詳情頁

其他連線：

• 把所有"瞭解更多"按鈕都連到同一個遛狗員詳情頁

• 新增"取消"按鈕 → 回到首頁

• 首頁的"使用者圖示" → 跳到個人資料頁

• 個人資料頁 → 用返回按鈕回到首頁

• 輪播圖的標題 → 跳到"狗狗訓練技巧"文章

測試和修改原型

點選Figma右上角的"播放"按鈕，進入演示模式。像真實使用者一樣從首頁開始測試：

• 檢查所有按鈕能不能正常跳轉

• 試試頁面能不能順暢滑動

• 確認返回按鈕能正常使用

• 給沒有連線的按鈕補上連線

低保真原型的好處

• 清楚展示使用者的每一步操作

• 製作速度快，不需要加顏色和圖片

• 方便早期讓使用者試用和收集意見

• 為後面做更完整的高保真原型做準備